/**
* 功能使用
*/

<template>
    <div class="function-use-content">
        <div class="device-content">
            <div class="title">
                <span class="span-1">功能使用数据</span>
                <div class="table-box" v-if="functionUserData.mode && functionUserData.mode.length > 0">
                    <el-table
                            :data="functionUserData.mode"
                            stripe
                            height="300"
                            style="width: 100%">
                        <el-table-column
                                prop="runMode"
                                label="功能">
                        </el-table-column>
                        <el-table-column
                                prop="modeCount"
                                sortable
                                label="使用次数/次">
                        </el-table-column>
                        <el-table-column
                                prop="deviceCount"
                                sortable
                                label="使用设备数/台">
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
        <div class="use-bottom">
            <el-row style="width: calc(100% + 20px);" :gutter="20">
                <el-col :span="12">
                    <div class="device-content">
                        <div class="title">
                            <span class="span-1">菜单使用数据</span>
                            <div class="table-box" v-if="functionUserData.menu && functionUserData.menu.length > 0">
                                <el-table
                                        :data="functionUserData.menu"
                                        stripe
                                        height="300"
                                        style="width: 100%">
                                    <el-table-column
                                            prop="menuName"
                                            label="菜单">
                                    </el-table-column>
                                    <el-table-column
                                            prop="menuCount"
                                            sortable
                                            label="使用次数/次">
                                    </el-table-column>
                                    <el-table-column
                                            prop="deviceCount"
                                            sortable
                                            label="使用设备数/台">
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="device-content">
                        <div class="title">
                            <span class="span-1">每天运作时段</span>
                            <div class="table-box" v-if="functionUserData.workTime && functionUserData.workTime.length > 0">
                                <el-table
                                        :data="functionUserData.workTime"
                                        stripe
                                        height="300"
                                        style="width: 100%">
                                    <el-table-column
                                            prop="hourTime"
                                            label="时间段"
                                            sortable
                                            width="180">
                                    </el-table-column>
                                    <el-table-column
                                            prop="modeCount"
                                            label="使用次数/次"
                                            sortable
                                            width="180">
                                    </el-table-column>
                                    <el-table-column
                                            prop="deviceCount"
                                            sortable
                                            label="使用设备数/台">
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>

        </div>
    </div>
</template>

<script>
export default {
  created () {
  },
  props: {
    functionUserData: {
      type: Object
    }
  },
  watch: {
    functionUserData (now, old) {
      if (now) {
        this.$nextTick().then(() => {
          // this.initPage(now)
        })
      }
    }
  },
  data () {
    return {
    }
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
    @import "@/assets/scss/modules/variables-module.scss";
    @import "@/assets/scss/modules/common-module.scss";
    .function-use-content{
        .device-content{
            @include device-content;
        }
        .chart-wrap {
            width: 100%;
            height: 100%;
        }
        .use-bottom{
            display: flex;

        }
        .table-box{
            margin-top: 20px;
        }
    }
</style>
